<template>
  <!-- 左侧抽屉 -->
  <el-drawer :visible="housreDialog" size="55%" :title="showTxt" :wrapper-closable="false" @close="closeDrawer">
    <el-form ref="drawerForm" :inline="true" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="所属小区" prop="community_code">
        <el-select v-model="form.community_code" placeholder="请选择" @change="variation">
          <el-option v-for="item in getSelectHome" :key="item.id" :label="item.name" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属楼栋" prop="building_code">
        <el-select v-model="form.building_code" placeholder="请选择">
          <el-option v-for="item in ridgepole" :key="item.id" :label="item.name" :value="item.code" />
        </el-select>
      </el-form-item>
      <el-form-item label="房产名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="户主姓名" prop="owner_name">
        <el-input v-model="form.owner_name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="联系方式" prop="owner_tel">
        <el-input v-model="form.owner_tel" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="房间数" prop="rooms">
        <el-input v-model="form.rooms" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="单元信息" prop="unit">
        <el-input-number v-model="form.unit" controls-position="right" :min="1" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="楼层信息" prop="floor">
        <el-input-number v-model="form.floor" controls-position="right" :min="1" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="入住时间" prop="enter_time">
        <el-date-picker
          v-model="form.enter_time"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <el-form-item label="房产描述" prop="desc">
        <el-input v-model="form.desc" placeholder="请输入" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button @click="closeDrawer">取消</el-button>
        <el-button type="primary" @click="submitData">确认</el-button>
      </el-form-item>
    </el-form>

  </el-drawer>
</template>

<script>
import { showBuildingApi, NewPropertyAPI, singleLouDongAPI, alterPropertyAPI } from '@/api/houseProperty'
// import dayjs from 'dayjs',
export default {
  props: {
    housreDialog: {
      type: Boolean,
      default: false
    },
    getSelectHome: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        // 房产信息
        community_code: '',
        // 楼栋信息
        building_code: '',
        // 房产名称
        name: '',
        // 户主姓名
        owner_name: '',
        // 房间数
        rooms: '',
        // 单元信息
        unit: '',
        // 楼层信息
        floor: '',
        // 电话
        enter_time: '',
        // 入住时间
        owner_tel: '',
        // 房产描述
        desc: '',
        id: ''
      },
      rules: {
        community_code: [{ required: true, message: '所属小区不可为空', trigger: 'blur' }],
        building_code: [{ required: true, message: '所属栋数不可为空', trigger: 'blur' }],
        name: [{ required: true, message: '房产名称不可为空', trigger: 'blur' }],
        owner_name: [{ required: true, message: '户主姓名不可为空', trigger: 'blur' }],
        floor: [{ required: true, message: '楼层信息不可为空', trigger: 'blur' }
        ],
        rooms: [{ required: true, message: '房间数不可为空', trigger: 'blur' }],
        unit: [{ required: true, message: '单元信息不可为空', trigger: 'blur' }],
        enter_time: [{ required: true, message: '入住时间不可为空', trigger: 'blur' }
        ],
        owner_tel: [{ required: true, message: '入住时间不可为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号不正确', trigger: ['blur', 'change'] }],
        desc: [{ required: true, message: '房产描述不可为空', trigger: 'blur' }]
      },
      // 栋数数据
      ridgepole: [],
      state: false
    }
  },
  computed: {
    showTxt() {
      return this.form.id ? '编辑小区' : '新增小区'
    }
  },

  methods: {
    // 关闭弹窗
    closeDrawer() {
      this.$emit('update:housreDialog', false)
      this.$refs.drawerForm.resetFields()
      this.ridgepole = []
    },
    // 获取栋数
    async communityName() {
      const { data } = await showBuildingApi({ community_code: this.form.community_code })
      // console.log(this.form.community_code)
      this.ridgepole = data
      console.log(this.ridgepole)
      // this.form.building_code = ''
    },
    // 小区变化时触发
    variation() {
      this.communityName()
      if (this.form.building_code) {
        this.form.building_code = ''
      }
    },
    // 提交数据
    submitData() {
      this.form.enter_time = +new Date(this.form.enter_time)
      this.$refs.drawerForm.validate(async vali => {
        if (!vali) return
        // console.log(this.form)
        if (this.form.id) {
          // console.log(this.form.id)
          await alterPropertyAPI(this.form)
          this.$message.success('修改成功')
          this.ridgepole = []
        } else {
          await NewPropertyAPI(this.form)
          this.$message.success('添加成功')
        }
        this.closeDrawer()
        this.$parent.housePropertyList()
      })
    },
    // 根据父组件传来的id,数据回显
    async communityParticulars(id) {
      // console.log(id)
      this.form = {
        // 房产信息
        community_code: '',
        // 楼栋信息
        building_code: '',
        // 房产名称
        name: '',
        // 户主姓名
        owner_name: '',
        // 房间数
        rooms: '',
        // 单元信息
        unit: '',
        // 楼层信息
        floor: '',
        // 电话
        enter_time: '',
        // 入住时间
        owner_tel: '',
        // 房产描述
        desc: '',
        id: ''
      }
      const { data } = await singleLouDongAPI(id)
      this.form = data
      if (this.form.id) {
        this.communityName()
      } else {
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form{
    margin: 0 20px;
  }
    // padding: 0 5px;
    .el-form-item{
      span{
        font-weight: 800;
      }
      .el-input,.el-input-number{
        display: block;
        width: 310px;
        height: 40px
      }
      ::v-deep  .el-select>.el-input,.el-range-editor.el-input__inner {
         width: 310px;
      }
      ::v-deep .el-textarea__inner{
        width: 310px;
      }
      // .el-input,.el-input-number:nth-child(odd){
      //   margin-right: 1px;
      // }
    }

  .but-rigth{
      float: right;
    }
  ::v-deep .el-input-number .el-input__inner{
    text-align: left;
  }

  span{
    font-weight: 800;
  }
  .formItem{
    margin-right: 0;
    margin-left: 200px;
  }
  .but{
    margin-top: 50px;
  }
  ::v-deep .ql-toolbar.ql-snow + .ql-container.ql-snow{
    height: 200px;
  }
  ::v-deep .el-upload--picture-card{
    width: 100px;
    height: 100px;
    line-height: 100px;
  }
</style>
